<!-- 地址 address -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收货地址管理</title>
    <link rel="stylesheet" href="../css/address.css">
    <link rel="stylesheet" href="../css/profile.css">
    <script src="../js/address.js"></script>
    <script src="../js/products/addressProducts.js"></script>
 </head>
 <body>
    <div class="address-container">
        <div class="address-header">
            <button class="add-btn" onclick="openAddressModal()">新增收货地址</button>
            <span class="address-count" id="addressCount"></span>
        </div>
        
        <!-- 地址表单模态框 -->
        <!-- 模态框容器 - 通过display属性控制显示/隐藏
     Modal Container - Controls visibility via display property -->
        <div id="addressModal" class="modal">
            <!-- 模态内容容器 - 包含所有表单元素
                 Modal Content Container - Contains all form elements -->
            <div class="modal-content">
                <!-- 关闭按钮 - 点击触发closeAddressModal()
                     Close Button - Triggers closeAddressModal() on click -->
                <div class="modal-header">
                    <span class="close" onclick="closeAddressModal()">&times;</span>
                    <div class="form-title">
                        <p>新增收货地址</p>                      
                    </div>              
                </div>
                
                <!-- 地址表单 - 阻止默认提交执行saveAddress()
                     Address Form - Prevents default submit to execute saveAddress() -->
                <form onsubmit="saveAddress(); return false">
                    <hr>
                    <div class="form-group">
                        <label>收货人：</label>
                        <input type="text" id="receiver" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label>所在地区：</label>
                        <select id="province" class="form-control" onchange="updateCityOptions()"></select>
                        <select id="city" class="form-control" onchange="updateDistrictOptions()"></select>
                        <select id="district" class="form-control"></select>
                    </div>
                    
                    <div class="form-group">
                        <label>详细地址：</label>
                        <input type="text" id="detail" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label>手机号码：</label>
                        <input type="tel" id="mobile" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label>地址别名：</label>
                        <input type="text" id="alias" class="form-control">
                    </div>
                    
                    <div class="form-group">
                        <label>邮箱地址：</label>
                        <input type="email" id="email" class="form-control">
                    </div>
                    
                    <button type="submit" class="add-btn">保存收货地址</button>
                </form>
            </div>
        </div>
    </div>

        <!-- 地址列表 -->
       
        <div id="addressList" class="address-list">
           
        </div>
    
  
</body>
 </html>